<template>
  <!-- 一般情况下 class类名应与组件名匹配
        组件名: Person.vue  class类:person
        组件名:MyTag.vue    class类:my-tag -->
  <div class="spot">
    <img :src="avatar" width="140px" />
    <div>
      <span>{{ name }}</span>
      <span>{{ location }}</span>
         <el-button @click="doClick">查看详情</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    avatar: {
      // 声明属性,指定头像
      type: String,
      default: '',
    },
    name: {
      // 声明属性, 指定需要显示的昵称
      type: String,
      default: '默认昵称',
    },
    location: {
      // 声明属性,指定地址
      type: String,
      default: '默认昵称',
    },
  },
  methods: {
    doClick(){
      this.$emit('jump')
    }
  },
}
</script>

<style lang="scss" scoped>
.spot {
  margin: 5px;
  display: inline-block;
  width: 510px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 150px;
  img{
    width: 170px;
  border-radius: 2px;
  }

  div {
    display: flex;
    text-align: left;
    justify-content: space-between;
    flex-direction: column;

    span:nth-child(1) {
      font-size: 20px;
      margin-left: 15px;
      font-weight: bold;
      color: red;
    }

    span:nth-child(2) {
      width: 320px;
      font-size: 12px;
      margin-left: 15px;
      font-weight: 200;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}
.spot:hover {
  transform: scale(1.0001);
  box-shadow: 1px 3px 3px #888888;
}
</style>
